<template>
  <div class="home">
    <carousel class="carousel" :img-list="imgListCarousel"></carousel>
    <div class="qingzhu_content">
      <div class="qingzhu_content_c inner_c">
        <div class="pro1">
          <div class="title">
            <h2>新品推荐，精心挑选</h2>
            <p class="info">家居必备使用小单品</p>
          </div>
          <div class="pro_pic">
            <div class="pro_c">
              <ul>
                <li v-for="(item, index) in imgListNew" :key="index">
                  <router-link :to="{path: '/detail', query:{productId :1}}" :show="item.show">
                    <img :src="item.imgUrl" alt="">
                    <div class="cont">
                      <h3>{{item.name}}</h3>
                      <span>{{item.price}}</span>
                    </div>
                  </router-link>
                </li>
              </ul>
            </div>
            <div class="btns">
              <a href="#" class="leftBtn">&lt;</a>
              <a href="#" class="rightBtn">&gt;</a>
            </div>
          </div>
        </div>
        <div class="pro2">
          <div class="title">
            <h2>专题活动，限时促销</h2>
            <p class="info">严选材质，用心设计</p>
          </div>
          <div class="pro2_c">
            <ul class = "pro2_c_pic">
              <li class = "pic1 pic">
                <a href="#">
                  <img src="../assets/img/img31.jpg" alt="">
                </a>
                <span></span>
              </li>
              <li class = "pic2 pic">
                <a href="#">
                  <img src="../assets/img/img32.jpg" alt="">
                </a>
                <span></span>
              </li>
              <li class = "pic3 pic">
                <a href="#">
                  <img src="../assets/img/img33.jpg" alt="">
                </a>
                <span></span>
              </li>
            </ul>
          </div>
        </div>
        <div class="pro3">
          <div class="title">
            <h2>青竹良品，你的家居首选</h2>
            <p class="info">天然之源，诚挚之礼</p>
          </div>
          <div class="pro3_c">
            <ul  class = "pub_pro">
              <li>
                <a href="#">
                  <img src="../assets/img/img40.jpg" alt="">
                </a>
                <div class="mask"></div>
              </li>
              <li>
                <a href="#">
                  <img src="../assets/img/img41.png" alt="">
                  <div class="cont">
                    <h3>简约时尚水泥花瓶</h3>
                    <span>￥450</span>
                  </div>
                </a>
                <div class="mask">
                  <a href="#" class = "btn">
                    查看详情
                  </a>
                </div>
              </li>

              <li>
                <a href="#">
                  <img src="../assets/img/img42.png" alt="">
                  <div class="cont">
                    <h3>简约时尚水泥花瓶</h3>
                    <span>￥450</span>
                  </div>
                </a>
                <div class="mask">
                  <a href="#" class = "btn">
                    查看详情
                  </a>
                </div>
              </li>
              <li>
                <a href="#">
                  <img src="../assets/img/img43.png" alt="">
                  <div class="cont">
                    <h3>简约时尚水泥花瓶</h3>
                    <span>￥450</span>
                  </div>
                </a>
                <div class="mask">
                  <a href="#" class = "btn">
                    查看详情
                  </a>
                </div>
              </li>
              <li>
                <a href="#">
                  <img src="../assets/img/img44.png" alt="">
                  <div class="cont">
                    <h3>简约时尚水泥花瓶</h3>
                    <span>￥450</span>
                  </div>
                </a>
                <div class="mask">
                  <a href="#" class = "btn">
                    查看详情
                  </a>
                </div>
              </li>
            </ul>
            <ul  class = "pub_pro">
              <li>
                <a href="#">
                  <img src="../assets/img/img45.jpg" alt="">
                </a>
                <div class="mask">
                </div>
              </li>
              <li>
                <a href="#">
                  <img src="../assets/img/img46.png" alt="">
                  <div class="cont">
                    <h3>简约时尚水泥花瓶</h3>
                    <span>￥450</span>
                  </div>
                </a>
                <div class="mask">
                  <a href="#" class = "btn">
                    查看详情
                  </a>
                </div>
              </li>

              <li>
                <a href="#">
                  <img src="../assets/img/img47.png" alt="">
                  <div class="cont">
                    <h3>简约时尚水泥花瓶</h3>
                    <span>￥450</span>
                  </div>
                </a>
                <div class="mask">
                  <a href="#" class = "btn">
                    查看详情
                  </a>
                </div>
              </li>
              <li>
                <a href="#">
                  <img src="../assets/img/img48.png" alt="">
                  <div class="cont">
                    <h3>简约时尚水泥花瓶</h3>
                    <span>￥450</span>
                  </div>
                </a>
                <div class="mask">
                  <a href="#" class = "btn">
                    查看详情
                  </a>
                </div>
              </li>
              <li>
                <a href="#">
                  <img src="../assets/img/img49.png" alt="">
                  <div class="cont">
                    <h3>简约时尚水泥花瓶</h3>
                    <span>￥450</span>
                  </div>
                </a>
                <div class="mask">
                  <a href="#" class = "btn">
                    查看详情
                  </a>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <div class="pro4">
          <div class="title">
            <h2>全球大牌优选，买手用心挑选</h2>
            <p class="info">全球好货，原装正品</p>
          </div>
          <div class="por4_top">
            <div class="pic1 pic">
              <img src="../assets/img/img51.jpg" alt="">
              <span></span>
            </div>
            <div class="pic2">
              <div class="top pic">
                <img src="../assets/img/img52.jpg" alt="">
                <span></span>
              </div>
              <div class="bottom pic">
                <img src="../assets/img/img53.jpg" alt="">
                <span></span>
              </div>
            </div>
            <div class="pic3 pic">
              <img src="../assets/img/img54.jpg" alt="">
              <span></span>
            </div>
          </div>
          <div class="pro4_bottom">
            <ul class="pro4_c">
              <li>
                <div class="pic">
                  <a href="#">
                    <img src="../assets/img/img55.png" alt="">
                  </a>
                </div>
                <p class="cont">
                  <a href="#">
                    自然生活，精选用料
                  </a>
                </p>
              </li>
              <li>
                <div class="pic">
                  <a href="#">
                    <img src="../assets/img/img56.png" alt="">
                  </a>
                </div>
                <p class="cont">
                  <a href="#">
                    自然生活，精选用料
                  </a>
                </p>
              </li>
              <li>
                <div class="pic">
                  <a href="#">
                    <img src="../assets/img/img57.png" alt="">
                  </a>
                </div>
                <p class="cont">
                  <a href="#">
                    自然生活，精选用料
                  </a>
                </p>
              </li>
              <li>
                <div class="pic">
                  <a href="#">
                    <img src="../assets/img/img58.png" alt="">
                  </a>
                </div>
                <p class="cont">
                  <a href="#">
                    自然生活，精选用料
                  </a>
                </p>
              </li>
              <li>
                <div class="pic">
                  <a href="#">
                    <img src="../assets/img/img59.png" alt="">
                  </a>
                </div>
                <p class="cont">
                  <a href="#">
                    自然生活，精选用料
                  </a>
                </p>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Carousel from "../components/Carousel";
export default {
  components: { Carousel },
  data() {
    return {
      imgListCarousel: [
        {
          toUrl: '/detail',
          imgUrl: require('../assets/img/img11.png')
        },
        {
          toUrl: '/detail',
          imgUrl: require('../assets/img/img12.png')
        },
        {
          toUrl: '/detail',
          imgUrl: require('../assets/img/img13.png')
        },
        {
          toUrl: '/detail',
          imgUrl: require('../assets/img/img12.png')
        }
      ],
      imgListNew: [
        {
          toUrl: 'http://localhost:9000/detail',
          imgUrl: require('../assets/img/img23.png'),
          name: '黑陶自然花香蜡烛',
          price: '300元',
          show: false
        },
        {
          toUrl: 'http://localhost:9000/detail',
          imgUrl: require('../assets/img/img24.png'),
          name: '黑陶自然花香蜡烛',
          price: '300元',
          show: true
        },
        {
          toUrl: 'http://localhost:9000/detail',
          imgUrl: require('../assets/img/img25.png'),
          name: '黑陶自然花香蜡烛',
          price: '300元',
          show: true
        },
        {
          toUrl: 'http://localhost:9000/detail',
          imgUrl: require('../assets/img/img26.png'),
          name: '黑陶自然花香蜡烛',
          price: '300元',
          show: true
        },
        {
          toUrl: 'http://localhost:9000/detail',
          imgUrl: require('../assets/img/img27.png'),
          name: '黑陶自然花香蜡烛',
          price: '300元',
          show: false
        }
      ]
    }
  },
  mounted() {
    this.getCarouselList()
  },
  methods: {
    getCarouselList: function () {
      this.$axios({
        method: 'get',
        url: 'http://localhost:8080/api/carousel/get'
      }).then(res => {
        console.log(res)
      }).catch(e => {
        console.log(e)
      })
    }
  }
}
</script>

<style scoped>
  .home {
    display: flex;
    /* 版心的宽度 */
    width: 1140px;
    /* 居中显示 */
    margin: 0 auto;
    padding-top: 70px;
    flex-direction: column;
  }
  .carousel {
    display: flex;
  }
  /* qingzhu_content部分 */
  .qingzhu_content{
    display: flex;
    width: 100%;
  }
  .qingzhu_content_c .pro1 .pro_pic{
    width: 100%;
    height: 364px;
    position: relative;
  }
  .qingzhu_content_c .pro1 .pro_pic .pro_c{
    width: 100%;
    height: 364px;
    overflow: hidden;
  }
  .qingzhu_content_c .pro1 .pro_pic ul{
    width: 3000px;
    height: 364px;
  }
  .qingzhu_content_c .pro1 .pro_pic ul li{
    width: 276px;
    height: 364px;
    margin-right: 10px;
    float: left;
  }
  .qingzhu_content_c .pro1 .pro_pic .btns a{
    position: absolute;
    height: 80px;
    width: 40px;
    font-size: 38px;
    top: 50%;
    margin-top: -40px;
    font-family:serif;
    font-weight: bold;
    color: #C1C1C1;
  }
  .qingzhu_content_c .pro1 .pro_pic .btns a.leftBtn{
    left: -41px;
  }
  .qingzhu_content_c .pro1 .pro_pic .btns a.rightBtn{
    right: -55px;
  }
  .qingzhu_content_c .pro1 .pro_pic .pro_c li img{
    width: 100%;
  }
  .qingzhu_content_c .pro1 .pro_pic .pro_c li .cont{
    text-align: center;
    padding-top: 20px;
    font-size: 14px;
  }
  .qingzhu_content_c .pro1 .pro_pic .pro_c li .cont h3{
    line-height: 36px;
    color: #000;
    font-weight: bold;
  }
  .qingzhu_content_c .pro1 .pro_pic .pro_c li .cont span{
    color: #DB2E2E;
  }
  .qingzhu_content_c .pro2 .pro2_c{
    height: 380px;
  }
  .qingzhu_content_c .pro2 .pro2_c .pro2_c_pic{

  }
  .qingzhu_content_c .pro2 .pro2_c .pro2_c_pic .pic1{
    width: 680px;
    height: 380px;
    background: purple;
    float: left;
    margin-right: 10px;
    overflow: hidden;
  }
  .qingzhu_content_c .pro2 .pro2_c .pro2_c_pic .pic img{
    transition: all 0.4s ease 0s;
  }
  .qingzhu_content_c .pro2 .pro2_c .pro2_c_pic .pic{
    position: relative;
  }
  .qingzhu_content_c .pro2 .pro2_c .pro2_c_pic .pic span{
    border: 2px solid #fff;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
  .qingzhu_content_c .pro2 .pro2_c .pro2_c_pic .pic:hover span{
    border: 2px solid #fff;
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    transition: all 0.4s ease 0s;
  }
  .qingzhu_content_c .pro2 .pro2_c .pro2_c_pic .pic:hover img{
    /* 下面的都是CSS3属性 */
    transform: scale(1.2);
    transition: all 0.4s ease 0s;
  }
  .qingzhu_content_c .pro2 .pro2_c .pro2_c_pic .pic2{
    width: 450px;
    height: 185px;
    float: left;
    margin-bottom: 10px;
    background: blue;
    overflow: hidden;
  }
  .qingzhu_content_c .pro2 .pro2_c .pro2_c_pic .pic3{
    width: 450px;
    height: 185px;
    float: left;
    overflow: hidden;
  }
  .qingzhu_content_c .pro3 .pro3_c{
    height: 630px;
    overflow: hidden;
  }
  .qingzhu_content_c .pro3 .pro3_c ul{
    width: 1150px;
    overflow: hidden;
    margin-bottom: 10px;
  }
  .qingzhu_content_c .pro3 .pro3_c ul li{
    width: 220px;
    height: 310px;
    float: left;
    margin-right: 10px;
    position: relative;
  }
  .qingzhu_content_c .pro3 .pro3_c ul li:hover .mask{
    display: block;
  }
  .qingzhu_content_c .pro3 .pro3_c ul li img{
    width: 100%;
  }

  .qingzhu_content_c .pro4 .por4_top{
    height: 358px;
  }
  .qingzhu_content_c .pro4 .por4_top{
    height: 358px;
  }
  .qingzhu_content_c .pro4 .por4_top .pic1{
    width: 504px;
    height: 358px;
    background: purple;
    margin-right: 10px;
    float: left;
  }
  .qingzhu_content_c .pro4 .por4_top .pic2{
    width: 411px;
    height: 358px;
    float: left;
  }
  .qingzhu_content_c .pro4 .por4_top .pic2 .top{
    height: 172px;
    background: cyan;
    margin-bottom: 14px;
  }
  .qingzhu_content_c .pro4 .por4_top .pic2 .bottom{
    height: 172px;
    background: cyan;
  }
  .qingzhu_content_c .pro4 .por4_top .pic3{
    width: 197px;
    height: 358px;
    background: pink;
    float: right;
  }
  .qingzhu_content_c .pro4 .por4_top .pic{
    overflow: hidden;
    position: relative;
  }
  .qingzhu_content_c .pro4 .por4_top .pic img{
    transition: all 0.4s ease 0s;
  }
  .qingzhu_content_c .pro4 .por4_top .pic:hover img{
    transform: scale(1.2);
    transition: all 0.4s ease 0s;
  }
  .qingzhu_content_c .pro4 .por4_top .pic span{
    border: 2px solid #fff;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
  .qingzhu_content_c .pro4 .por4_top .pic:hover span{
    border: 2px solid #fff;
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    transition: all 0.4s ease 0s;
  }
  .qingzhu_content_c .pro4 .pro4_bottom{
    overflow: hidden;
  }
  .qingzhu_content_c .pro4 .pro4_bottom .pro4_c{
    padding-top: 20px;
    width: 1160px;
  }
  .qingzhu_content_c .pro4 .pro4_bottom .pro4_c li{
    width: 210px;
    height: 140px;
    float: left;
    margin-right: 22px;
    text-align: center;
  }
  .qingzhu_content_c .pro4 .pro4_bottom .pro4_c li .pic{
    height: 90px;
    border: 1px solid #E8E8E8;
    overflow: hidden;
  }
  .qingzhu_content_c .pro4 .pro4_bottom .pro4_c li .pic img{
    transition: all 0.4s ease 0s;
  }
  .qingzhu_content_c .pro4 .pro4_bottom .pro4_c li .pic:hover img{
    transform: translateX(-50px);
    transition: all 0.4s ease 0s;
  }
  .qingzhu_content_c .pro4 .pro4_bottom .pro4_c li .pic img{
    height: 100%;
  }
  .qingzhu_content_c .pro4 .pro4_bottom .pro4_c li .cont{
    line-height: 48px;
    color: #5D5D5D;
  }
  /* liangpin部分 */
  .liangpin{
    width: 100%;
    height: 613px;
    background: #F4F0EA;
  }
  .liangpin .lp_pro{
    height: 432px;
  }
  .liangpin .lp_pro ul li{
    width: 276px;
    height: 432px;
    background: #fff;
    float: left;
    margin-right: 9px;
    overflow: hidden;
  }
  .liangpin .lp_pro ul li a img{
    width: 100%;
    transition: all 1s ease 0s;
  }
  .liangpin .lp_pro ul li a img:hover{
    transform: scale(1.2);
    transition: all 2s ease 0s;
  }
  .liangpin .lp_pro ul li .cont{
    width: 236px;
    height: 144px;
    background: #fff;
    padding: 10px 15px;
    margin: 0 auto;
    position: relative;
    top: -15px;
  }
  .liangpin .lp_pro ul li .cont .tit{
    line-height: 41px;
    height: 47px;
  }
  .liangpin .lp_pro ul li .cont .tit h4{
    float: left;
    font-size: 14px;
    font-weight: bold;
    color: #333333;
  }
  .liangpin .lp_pro ul li .cont .tit span{
    float: right;
    font-size: 14px;
    color: #C78A49;
  }
  .liangpin .lp_pro ul li .cont .info{
    font-size: 12px;
    line-height: 15px;
    color: #4D4D4D;
    /* 下面的属性是设置文字省略号的 */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
  }
  .liangpin .lp_pro ul li .cont .time{
    margin-top: 15px;
    font-size: 12px;
    color: #777777;
  }
</style>
